<template>
    <div class="notice-c d-none d-sm-block">
        <h3>通知公告</h3>
        <ul class="list">
            <li class="noticeItem" @click="enterPage(notice)" v-for="notice in noticeList" :key="notice.colId" :title="notice.colTitle"><i
                class="el-icon-star-on"></i>{{notice.colTitle }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            noticeList: []
        }
    },
    mounted() {
        this.getNoticeList()
    },
    methods: {
        // 获取通知列表
        getNoticeList() {
            if (this.$store.getters.noticeList.length) {
                this.noticeList = this.$store.getters.noticeList
            } else {
                this.$api.notice.getList({
                    pageSize: 10,
                    pageNum: 1
                }).then(res => {
                    const data = res.data
                    if (data.code == 200) {
                        this.noticeList = data.rows
                        this.$store.commit('appData/setNoticeList', data.rows)
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        enterPage(notice) {
            console.log('notice', notice)
            const path = this.$route.path
            if (path == '/notice') {
                this.$emit('clickNotice', notice)
            } else {
                this.$router.push({
                    path: '/notice',
                    query: {
                        type: 'detail',
                      colId: notice.colId
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@media (max-width: 1024px) {
    h3 {
        font-size: 18px !important;
        height: 55px !important;
        line-height: 55px !important;
    }
}

.notice-c {
    h3 {
        font-family: "微软雅黑";
        text-align: left;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        outline: none;
        /*background: #529e2f;*/
        background: $mainColor;
        color: #fff;
        padding-left: 25px;
        line-height: 80px;
        font-weight: 600;
        // margin-right: 10px;
        font-size: 24px;
    }

    .list {
        border: 1px solid #e6e6e6;
        border-top: none;
        color: #333;
        font-size: 16px;
        font-family: "微软雅黑";
        text-align: left;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        outline: none;
        list-style: none;
        padding: 5px 15px;
        // padding-left: 25px;

        i {
            margin-right: 5px;
            color: $mainColor;
        }

        li {
            cursor: pointer;
            margin-bottom: 10px;
            font-size: 15px;
        }

    }
  .noticeItem{
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
    display:block;
  }
}
</style>
